<template>
	<view class="pop-promot-box" catchtouchmove="preventTouchMove">
		<view class="pop-promot-back">
			<view class="pop-promot-title">请选择打卡方式</view>
			<picker class="pickerClass" 
				range-key="name" 
				@change="radioChange"
				:range="punchModeList">
				<view class="apply-line-select">
					{{punchModeList[punchModeIndex].name}}
					<view class="right-icon"></view>
				</view>
			</picker>
			<button class="bottom-button" @click="determineTap">确 定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				punchModeIndex: 0,
				punchModeList: [{
						'name': '正序打卡',
						'sort': 'asc'
					},
					{
						'name': '倒序打卡',
						'sort': 'desc'
					},
					{
						'name': '乱序打卡',
						'sort': 'no'
					}
				]
			}
		},
		methods: {
			radioChange: function(e) {
				console.log('e', e);
				var selectIndex = e.detail.value;
				this.punchModeIndex = Number(selectIndex);
			},
			preventTouchMove: function() {},
			determineTap: function() {
				let dataset = this.punchModeList[this.punchModeIndex];
				this.$emit('determinePlay', {
					...dataset
				});
			},
		}
	}
</script>

<style lang="scss" scoped>

	.pop-promot-box {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    background-color: rgba(0, 0, 0, 0.8);
	    z-index: 10000;
	    top: 0;
	    left: 0;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	.pickerClass{
	    width: 100%;
	}
	.pop-promot-back {
	    width: 76%;
	    margin: 0 12%;
	    border-radius: 10px;
		background: var(--themeGradientTopBack);
	    // background-image: url(https://cdn.spbcn.org/spbcnappneed/onlineGameRuleBackView2.png);
	    // background-repeat: no-repeat;
	    // background-size: 100% 100%;
	    box-sizing: border-box;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    overflow: hidden;
	}
	
	.pop-promot-title {
	    width: 100%;
	    height: 50px;
	    line-height: 50px;
	    background: var(--themeBlackTopBack);
	    font-size: 16px;
	    color: white;
	    text-align: center;
	    font-weight: 900;
	}
	.apply-line-select{
	    width: 70%;
	    margin: 20px 15%;
	    height: 40px;
	    line-height: 40px;
	    border-radius: 6px;
	    text-align: center;
	    background-color: white;
	    font-size: 15px;
	    font-weight: 900;
	    border: 1px solid #000;
		color: #000;
	    position: relative;
	}
	.bottom-button{
	    width: 90px;
	    height: 30px;
	    line-height: 30px;
	    border-radius: 8px;
	    text-align: center;
	     color: white;
	     background-color: black;
	     font-size: 14px;
	     font-weight: 900;
	     margin-bottom: 20px;
	}
	.right-icon{
	    width: 0;
	    height: 0;
	    border-width: 12px 11px 0px;
	    border-style: solid;
	    border-color: black transparent transparent;
	    right: 10px;
	    top: 14px;
	    position: absolute;
	}
</style>